<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/pages/templates/TemplateClient.xhtml">

	<ui:define name="titre">Fun With Videos</ui:define>
	<ui:define name="content">
		<h:head></h:head>
		<h:body>
			<h:form>

				<p:dataGrid value="#{mbCatalogue.listVideo}" var="video" columns="3"
					rows="12" paginator="true"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="9,12,15">

					<p:panel header="#{video.nom}" style="text-align:center">
						<h:panelGrid columns="1" border="0" style="width:100%">
							<p:graphicImage value="resources/images/#{video.affiche}.gif"/>
			        <h:outputText value="#{video.duree} min"/>
			        <h:outputText>Date de disponibilité</h:outputText>
			        <h:outputText value="#{video.dateMiseAdispo}"><f:convertDateTime type="date" pattern="dd-MM-yyyy"/></h:outputText>au
			        <h:outputText value="#{video.dateFinMiseADispo}"><f:convertDateTime type="date" pattern="dd-MM-yyyy"/></h:outputText><br/>
			        
			        
			        <p:commandLink action="#{mbCatalogue.videoChoisieClient}" >
			        <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
			        <f:setPropertyActionListener value="#{video}" target="#{mbCatalogue.selectedVideo}" />
			        </p:commandLink>
			        
			        
			        
			          
							<h:commandButton value="Ajouter au panier"
								action="#{mbPanier.ajouterPanier}" >
							<f:setPropertyActionListener value="#{video}"
								target="#{mbPanier.selectedVideo}" />
								</h:commandButton>
						</h:panelGrid>
					</p:panel>
				</p:dataGrid>


			</h:form>
		</h:body>
	</ui:define>
</ui:composition>
